<template>
  <div class="header">我的全部购物车</div>
  <div class="container">
    <div class="container__shop"
         v-for="shop of cartList"
         :key="shop.shopId">
      <div class="container__shop__shop-name">{{shop.shopName}}</div>
      <div class="container__shop__info">
        <!-- 前两个 -->
        <div v-for="item of Object.keys(shop.itemList).slice(0, 2)"
             :key="item"
             class="container__shop__info__item">
          <div class="container__shop__info__item__left">
            <img :src="shop.itemList[item].imgUrl"
                 alt=""
                 class="container__shop__info__item__left__image" />
          </div>
          <div class="container__shop__info__item__right">
            <div class="container__shop__info__item__right__name">{{ shop.itemList[item].name }}</div>
            <div class="container__shop__info__item__right__price">
              <div class="container__shop__info__item__right__price__left">
                ¥{{ shop.itemList[item].promotionPrice }} x {{ shop.itemList[item].count }}
              </div>
              <div class="container__shop__info__item__right__price__right">
                ¥{{ ( shop.itemList[item].promotionPrice * shop.itemList[item].count ).toFixed(2) }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 后面的 -->
      <template v-if="!showMore">
        <div v-for="item of Object.keys(shop.itemList).slice(2)"
             :key="item"
             class="container__shop__info__item">
          <div class="container__shop__info__item__left">
            <img :src="shop.itemList[item].imgUrl"
                 alt=""
                 class="container__shop__info__item__left__image" />
          </div>
          <div class="container__shop__info__item__right">
            <div class="container__shop__info__item__right__name">{{ shop.itemList[item].name }}</div>
            <div class="container__shop__info__item__right__price">
              <div class="container__shop__info__item__right__price__left">
                ¥{{ shop.itemList[item].promotionPrice }} x {{ shop.itemList[item].count }}
              </div>
              <div class="container__shop__info__item__right__price__right">
                ¥{{ ( shop.itemList[item].promotionPrice * shop.itemList[item].count ).toFixed(2) }}
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 展开更多 -->
      <div @click="showMoreClick"
           v-if="showMore && Object.keys(shop.itemList).length>2"
           class="container__shop__info__more">
        共计商品{{Object.keys(shop.itemList).length}}种/{{sumNumber}}件 &nbsp;&nbsp;&#xe610;
      </div>
    </div>
  </div>
  <docker-view tag="cart" />
</template>
<script>
import { ref } from 'vue'
import { get } from '@/utils/request'
import DockerView from '@/components/DockerView'
const useCartListEffect = () => {
  const cartList = ref([])
  const getCartList = async () => {
    // 调用接口
    const result = await get('/api/cart')
    console.log(result.data.code)
    if (result.data.code === '0000') {
      cartList.value = result.data.data
    } else {
      cartList.value = []
    }
  }
  const computeTotalPrice = (productList) => {
    let totalPrice = 0.0
    productList.forEach(element => {
      totalPrice += element.count * element.promotionPrice
    })
    return totalPrice.toFixed(2)
  }
  const computeTotalNumber = (productList) => {
    let totalNumber = 0
    productList.forEach(element => {
      totalNumber += element.count
    })
    return totalNumber
  }
  getCartList()
  return { cartList, computeTotalNumber, computeTotalPrice }
}
const cartList = [
  {
    shopId: 1,
    shopName: '沃尔玛-1',
    itemList: [
      {
        id: 1,
        name: '全部-番茄150g/份',
        imgUrl: 'https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202202261527635.png',
        sales: 1,
        promotionPrice: 1.6,
        originalPrice: 1.6,
        count: 1,
        checked: true
      },
      {
        id: 2,
        name: '全部-番茄250g/份',
        imgUrl: 'https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202202261527853.png',
        sales: 2,
        promotionPrice: 2.6,
        originalPrice: 2.6,
        count: 2,
        checked: true
      },
      {
        id: 3,
        name: '全部-番茄350g/份',
        imgUrl: 'https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202202261527922.png',
        sales: 3,
        promotionPrice: 3.6,
        originalPrice: 3.6,
        count: 3,
        checked: true
      },
      {
        id: 4,
        name: '全部-番茄450g/份',
        imgUrl: 'https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202202261530259.png',
        sales: 4,
        promotionPrice: 4.6,
        originalPrice: 4.6,
        count: 4,
        checked: true
      }
    ]
  },
  {
    shopId: 2,
    shopName: '沃尔玛-2',
    itemList: [
      {
        id: 2,
        name: '全部-番茄250g/份',
        imgUrl: 'https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202202261527853.png',
        sales: 2,
        promotionPrice: 2.6,
        originalPrice: 2.6,
        count: 2,
        checked: true
      },
      {
        id: 3,
        name: '全部-番茄350g/份',
        imgUrl: 'https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202202261527922.png',
        sales: 3,
        promotionPrice: 3.6,
        originalPrice: 3.6,
        count: 3,
        checked: true
      },
      {
        id: 4,
        name: '全部-番茄450g/份',
        imgUrl: 'https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202202261530259.png',
        sales: 4,
        promotionPrice: 4.6,
        originalPrice: 4.6,
        count: 4,
        checked: true
      }
    ]
  },
  {
    shopId: 3,
    shopName: '沃尔玛-3',
    itemList: [
      {
        id: 1,
        name: '全部-番茄150g/份',
        imgUrl: 'https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202202261527635.png',
        sales: 1,
        promotionPrice: 1.6,
        originalPrice: 1.6,
        count: 1,
        checked: true
      },
      {
        id: 3,
        name: '全部-番茄350g/份',
        imgUrl: 'https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202202261527922.png',
        sales: 3,
        promotionPrice: 3.6,
        originalPrice: 3.6,
        count: 3,
        checked: true
      },
      {
        id: 4,
        name: '全部-番茄450g/份',
        imgUrl: 'https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202202261530259.png',
        sales: 4,
        promotionPrice: 4.6,
        originalPrice: 4.6,
        count: 3,
        checked: true
      }
    ]
  }
]
const useShowMoreEffect = () => {
  const showMore = ref(true)
  const showMoreClick = () => {
    showMore.value = false
  }
  return { showMore, showMoreClick }
}
export default {
  name: 'CartList',
  components: { DockerView },
  setup () {
    const { showMore, showMoreClick } = useShowMoreEffect()
    const { computeTotalNumber, computeTotalPrice } = useCartListEffect()
    return { cartList, computeTotalNumber, computeTotalPrice, showMore, showMoreClick }
  }

}
</script>
<style lang="scss" scoped>
.header {
  height: 64rem;
  line-height: 64rem;
  font-size: 16rem;
  text-align: center;
  color: #333333;
  font-family: PingFangSC-Regular;
}
.container {
  position: fixed;
  left: 0;
  right: 0;
  top: 56rem;
  bottom: 49rem;
  overflow-y: auto;
  background-color: #f8f8f8;
  &__shop {
    border-radius: 4rem;
    max-height: 400rem;
    width: 339rem;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
    top: 16rem;
    padding: 16rem;
    padding-bottom: 6rem;
    margin-bottom: 20rem;
    box-sizing: border-box;
    &__shop-name {
      font-family: PingFangSC-Medium;
      font-size: 16rem;
      color: #333333;
      margin-bottom: 16rem;
    }
    &__info {
      &__item {
        display: flex;
        margin-bottom: 6rem;
        &__left {
          &__image {
            width: 46rem;
            height: 46rem;
            margin-right: 16rem;
          }
        }
        &__right {
          flex-grow: 1;
          &__name {
            margin-top: 2rem;
            font-family: PingFangSC-Medium;
            font-size: 14rem;
            color: #333333;
            margin-bottom: 8rem;
          }
          &__price {
            display: flex;
            justify-content: space-between;
            &__left {
              font-family: PingFangSC-Regular;
              font-size: 28rem;
              color: #e93b3b;
              transform: scale(0.5, 0.5);
              transform-origin: left top;
              &::first-letter {
                font-size: 20rem;
              }
            }
            &__right {
              font-family: PingFangSC-Regular;
              font-size: 28rem;
              color: #000000;
              text-align: right;
              transform: scale(0.5, 0.5);
              transform-origin: right top;
              &::first-letter {
                font-size: 20rem;
              }
            }
          }
        }
      }
      &__more {
        width: 307rem;
        height: 28rem;
        background: #f5f5f5;
        margin: 0 auto;
        font-size: 14rem;
        color: #999999;
        line-height: 28rem;
        text-align: center;
        margin-bottom: 12rem;
      }
    }
  }
}
</style>
